/**
 * 初始化 ECharts 图表
 * @param {Array} dateArr
 * @param {Array} sData
 */
const initCharts = (dateArr, sData) => {
  const chartDom = document.getElementById("main");
  const myChart = echarts.init(chartDom);
  const option = {
    // eCharts 配置项
    xAxis: {
      type: "category",
      data: dateArr, // X 轴数据
    },
    yAxis: {
      type: "value",
    },
    grid: {
      width: 800,
      height: 400,
    },
    series: [
      {
        data: sData, // Y 轴数据
        type: "line",
        smooth: true,
        color: "#33c6f7",
        areaStyle: {
          color: "#f2fbfe",
        },
      },
    ],
  };
  option.xAxis.data = dateArr;
  option.series.data = sData;
  option && myChart.setOption(option);
};

/**
 * 获取 json 数据中 date 字段的值，去重后升序排序，最终作为数组返回
 * @param {Array} data json文件中获取到的数据
 * @param {String} searchKey 搜索关键字与字段 keyword 相同，本题为字符串 "watermelon"
 * @param {String} platform 搜索设备：1:PC+移动（即 data.json 中字段 platform 值为 PC 或 Mobile）；2:PC；3:移动。
 * @returns {Array} xAxis 参数 data 中属性 date 去重排序后的数组
 */
const getxAxis = (data, searchKey, platform) => {
  let xAxis = [];
  // TODO：待补充代码
  xAxis = data.filter((item) => item.keyword == searchKey);
  if (platform == "2") xAxis = xAxis.filter((item) => item.platform == "PC");
  if (platform == "3") xAxis = xAxis.filter((item) => item.platform == "Mobile");
  xAxis = [...new Set(xAxis.map((item) => item.date))];
  xAxis.sort((a, b) => {
    let aDate = new Date(a);
    let ay = aDate.getFullYear();
    let am = aDate.getMonth() + 1;
    let ad = aDate.getDate();
    let bDate = new Date(b);
    let by = bDate.getFullYear();
    let bm = bDate.getMonth() + 1;
    let bd = bDate.getDate();
    if (ay != by) return ay - by;
    else if (am != bm) return am - bm;
    else if (ad != bd) return ad - bd;
  });
  // console.log(xAxis);
  return xAxis;
};

//  传递函数的默认值，用于调试
let defaultDateArr = [
  "2024-02-01",
  "2024-02-02",
  "2024-02-03",
  "2024-02-04",
  "2024-02-07",
];
/**
 * 根据 searchKey、platform 字段提取与参数 data 中的日期列表 dateArr 一一对应的搜索指数字段 count，最终存储在 sData 中返回。
 * @param {Array} data json文件中获取到的数据
 * @param {String} searchKey 搜索关键字与字段 keyword 相同，本题为字符串 "watermelon"
 * @param {String} platform 搜索设备：1:PC+移动（即 data.json 中字段 platform 值为 PC 或 Mobile）；2:PC；3:移动。
 * @param {Array} dateArr getxAxis 函数返回的日期列表
 * @returns {Array} sData 符合以上条件的 Y 轴数据
 */
const getSeriesData = (data, searchKey, platform, dateArr) => {
  if (dateArr.length === 0) {
    dateArr = defaultDateArr; // 如果目标 1 未完成，则给 dateArr 赋默认值，用于调试
  }
  let sData = [];
  // TODO：待补充代码
  let filterData = data.filter((item) => item.keyword == searchKey);
  if (platform == "2")
    filterData = filterData.filter((item) => item.platform == "PC");
  if (platform == "3")
    filterData = filterData.filter((item) => item.platform == "Mobile");
  filterData.sort((a, b) => {
    a = a.date;
    b = b.date;
    let aDate = new Date(a);
    let ay = aDate.getFullYear();
    let am = aDate.getMonth() + 1;
    let ad = aDate.getDate();
    let bDate = new Date(b);
    let by = bDate.getFullYear();
    let bm = bDate.getMonth() + 1;
    let bd = bDate.getDate();
    if (ay != by) return ay - by;
    else if (am != bm) return am - bm;
    else if (ad != bd) return ad - bd;
  });
  let sum = 0;
  for (let i = 0, j = 0; i < filterData.length; i++) {
    if (filterData[i].date == dateArr[j]) sum += filterData[i].count;
    else {
      sData.push(sum);
      sum = filterData[i].count;
      j++;
    }
  }
  sData.push(sum);
  return sData;
};

/**
 * 重置 ECharts 实例的 option 配置
 * @param {Array} data json文件中获取到的数据
 * @param {String} searchKey 搜索关键字与字段 keyword 相同，本题为字符串 "watermelon"
 * @param {String} platform 搜索设备：1:PC+移动（即 data.json 中字段 platform 值为 PC 或 Mobile）；2:PC；3:移动。
 */
const setEChartsOption = (data, searchKey, platform) => {
  const dateArr = getxAxis(data, searchKey, platform);
  const sData = getSeriesData(data, searchKey, platform, dateArr);
  initCharts(dateArr, sData);
};
/**
 * 修改搜索设备下拉框选项后触发的函数
 */
const changePlatform = () => {
  let platform = document.querySelector("#device").value;
  setEChartsOption(resData, searchKey, platform);
};
const searchKey = "watermelon"; // 全局常量：本题搜索的关键词
let resData = null; // 用于存储 json 文件中读取的原始数据
/**
 * 使用 axios 从 json 文件中读取数据
 */
const getData = () => {
  axios({
    url: "./js/data.json",
  }).then((res) => {
    let platform = document.querySelector("#device").value;
    resData = res.data;
    setEChartsOption(resData, searchKey, platform);
  });
};
// 获取数据
getData();
